<!--
 * @Author: Christion.Young
 * @Date: 2020-11-26 21:21:58
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-31 11:30:55
 * @FilePath: \vprisk10.14\src\views\PublicManage\publicManage\financialInstrument\financialITDefinition\templateManagement.vue
 * @Description: 模板管理
-->

<!-- 模板管理 -->
<template>
    <div class="templateManagement">
        <el-row>
            <el-col>
                <!-- 顶部按钮 ################################################################################################## -->
                <upper-template @search="queryBtnTemA"
                                @clear="resetBtnTemA">
                    <!-- 操作按钮区 -->
                    <div slot="buttonArea">
                        <el-button @click="operatingTemA(1)">配置模板</el-button>
                        <el-button @click="operatingTemA(2)">查看模板</el-button>
                    </div>
                    <!-- 搜索区 -->
                    <div slot="searchArea">
                        <el-form :model="searchFormTemA"
                                 ref="searchFormTemA"
                                 label-width="100px"
                                 label-position="left"
                                 size="mini">
                            <el-form-item label="模板名称：">
                                <el-input v-model="searchFormTemA.tableNameCn"
                                          placeholder="请输入模板名称"></el-input>
                            </el-form-item>
                            <el-form-item label="所属模块：">
                                <el-input v-model="searchFormTemA.moduleCode"
                                          placeholder="请输入所属模块"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 显示隐藏区 -->
                    <div slot="columnHide">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="item in textData"
                                         :label="item.label"
                                         :key="item.prop">{{ item.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </upper-template>

                <!-- 表格     ################################################################################################## -->
                <el-table ref="multipleTableTemA"
                          :data="tableDataTemA"
                          stripe
                          @row-click="authorizeForTemA">
                    <el-table-column width="55"
                                     type="selection"
                                     ></el-table-column>
                    <el-table-column prop="tableNameEn"
                                     label="模板编号"
                                     v-if="columnState[0]"
                                      show-overflow-tooltip >
                    </el-table-column>
                    <el-table-column prop="tableNameCn"
                                     label="模板名称"
                                     v-if="columnState[1]"
                                      show-overflow-tooltip >
                    </el-table-column>
                    <el-table-column prop="moduleCode"
                                     label="所属模块"
            :formatter="row=>$getLabel(row.moduleCode,moduleCodeList)"
                                     v-if="columnState[2]">
                    </el-table-column>
                    <el-table-column prop="descn"
                                     label="描述"
                                     v-if="columnState[3]"
                                      show-overflow-tooltip >
                    </el-table-column>
                </el-table>
                <!-- 分页     ################################################################################################## -->
                <pagination @size-change="handleSizeChangeTemA"
                            @current-change="handleCurrentChangeTemA"
                            @refresh="searchFuncTemA"
                            :current-page="searchFormTemA.page"
                            :page-size="searchFormTemA.size"
                            :total="totalTemA"></pagination>
            </el-col>
        </el-row>
        <!-- 配置模板     ##################################################################################################### -->
        <el-dialog v-dialogDrag
                   title="配置模板"
                   :visible.sync="addOrEditTemA"
                   width="700px"
                   top="3%">
            <el-row>
                <el-col style="margin-bottom: 20px;">
                    <!-- 按钮 -->
                    <div style="display:flex;justify-content:space-between;height:32px;margin-bottom:10px;">
                        <!-- 左侧按钮 -->
                        <div>
                            <el-button @click="editTemB">编辑</el-button>
                            <el-button @click="enableTemB">启用</el-button>
                            <el-button @click="blockUpTemB">停用</el-button>
                        </div>

                        <!-- 右侧按钮 -->
                        <div style="line-height:30px;">
                            <el-popover placement="bottom"
                                        trigger="click"
                                        popper-class="icon_porper">
                                <div>
                                    <el-form :model="searchFormTemB"
                                             ref="searchFormTemB"
                                             label-width="100px"
                                             label-position="left"
                                             size="mini">
                                        <el-form-item label="数据库字段：">
                                            <el-input v-model="searchFormTemB.columnEn"
                                                      placeholder="请输入数据库字段"></el-input>
                                        </el-form-item>
                                        <el-form-item label="中文名称：">
                                            <el-input v-model="searchFormTemB.columnCn"
                                                      placeholder="请输入中文名称"></el-input>
                                        </el-form-item>
                                        <el-form-item label="字段类型：">
                                            <!-- <el-input v-model="searchFormTemB.columnType"></el-input> -->
                                            <el-select v-model="searchFormTemB.columnType"
                                                       placeholder="请选择字段类型">
                                                <el-option label="内置字段"
                                                           value="0"></el-option>
                                                <el-option label="扩展字段"
                                                           value="1"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                    <div style="display: flex;justify-content: center;margin-top: 20px;">
                                        <el-button size="mini"
                                                   @click="queryBtnTemB">查询</el-button>
                                        <el-button size="mini"
                                                   @click="resetBtnTemB">重置</el-button>
                                    </div>
                                </div>
                                <i class="iconfont icon-sousuo"
                                   title="搜索"
                                   style="margin-left:22px;color:#98A5C0;"
                                   slot="reference"></i>
                            </el-popover>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="multipleTableTemB"
                              :data="tableDataTemB"
                              height="400px"
                              stripe
                              @row-click="authorizeForTemB">
                        <el-table-column width="55"
                                         type="selection"></el-table-column>
                        <el-table-column prop="columnEn"
                                         label="数据库字段"
                                          show-overflow-tooltip >
                        </el-table-column>
                        <el-table-column prop="columnCn"
                                         label="中文名称"
                                          show-overflow-tooltip >
                        </el-table-column>
                        <el-table-column prop="dataType"
                                         label="数据类型">
                        </el-table-column>
                        <el-table-column prop="length"
                                         label="字段长度"> </el-table-column>
                        <el-table-column prop="relatedDimensionCode"
                                         label="关联维度"
                                          show-overflow-tooltip >
                        </el-table-column>
                        <el-table-column prop="columnType"
                                         :formatter="columnTypeFormatter"
                                         label="字段类型">
                        </el-table-column>
                        <el-table-column prop="status"
                                         :formatter="row => (row.status == '1' ? '启用' : '停用')"
                                         label="字段状态">
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <pagination @size-change="handleSizeChangeTemB"
                                @current-change="handleCurrentChangeTemB"
                                @refresh="searchFuncTemB"
                                :current-page="searchFormTemB.page"
                                :page-size="searchFormTemB.size"
                                :total="totalTemB"></pagination>
                </el-col>
            </el-row>
        </el-dialog>
        <!-- 编辑字段     ##################################################################################################### -->
        <el-dialog v-dialogDrag
                   title="编辑字段信息"
                   :visible.sync="addOrEditTemB"
                   width="800px"
                   top="3%">
            <el-form :model="saveFormTemB"
                     ref="addTreeForm"
                     label-width="200px"
                     label-position="right"
                     :rules="saveFormRules">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="数据库字段："
                                      style="width:500px;"
                                      prop="columnEn">
                            <el-input v-model="saveFormTemB.columnEn"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="中文名称："
                                      style="width:500px;"
                                      prop="columnCn">
                            <el-input v-model="saveFormTemB.columnCn"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="数据类型："
                                      style="width:500px;"
                                      prop="dataType">
                            <el-input v-model="saveFormTemB.dataType"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="字段长度："
                                      style="width:500px;"
                                      prop="length">
                            <el-input v-model="saveFormTemB.length"
                                      disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="关联维度："
                                      style="width:500px;"
                                      prop="relatedDimensionCode">
                            <el-input v-model="saveFormTemB.relatedDimensionCode"
                                      readonly
                                      style="width:200px;"></el-input>
                            <el-button icon="el-icon-plus"
                                       @click="getDimTemB()"></el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="字段类型："
                                      style="width:500px;"
                                      prop="columnType">
                            <!-- <el-input v-model="saveFormTemB.columnType" disabled></el-input> -->
                            <el-select v-model="saveFormTemB.columnType"
                                       disabled
                                       style="width:100%;">
                                <el-option label="内置字段"
                                           value="0"></el-option>
                                <el-option label="扩展字段"
                                           value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="字段状态："
                                      style="width:500px;"
                                      prop="status">
                            <!-- <el-input v-model="saveFormTemB.status" disabled></el-input> -->
                            <el-select v-model="saveFormTemB.status"
                                       disabled
                                       style="width:100%;">
                                <el-option label="停用"
                                           value="0"></el-option>
                                <el-option label="启用"
                                           value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="confirmTneTemB">确 定</el-button>
                <el-button @click="cancelTneTemB">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 选择关联维度 ##################################################################################################### -->
        <el-dialog v-dialogDrag
                   title="选择关联维度"
                   :visible.sync="addOrEditTemC"
                   width="800px"
                   top="3%">
            <el-row>
                <el-col>
                    <div style="display:flex;justify-content:space-between;height:32px;margin-bottom:10px;">
                        <!-- 左侧按钮 -->
                        <div>
                            <el-button @click="affirmTemC">确认</el-button>
                            <el-button @click="closeTemC">关闭</el-button>
                        </div>

                        <!-- 右侧按钮 -->
                        <div style="line-height:30px;">
                            <el-popover placement="bottom"
                                        trigger="click"
                                        popper-class="icon_porper">
                                <div>
                                    <el-form :model="searchFormTemC"
                                             ref="searchFormTemC"
                                             label-width="100px"
                                             label-position="right"
                                             size="mini">
                                        <el-form-item label="编码：">
                                            <el-input v-model="searchFormTemC.dictCode"></el-input>
                                        </el-form-item>
                                        <el-form-item label="名称：">
                                            <el-input v-model="searchFormTemC.dictName"></el-input>
                                        </el-form-item>
                                        <el-form-item label="属性：">
                                            <el-input v-model="searchFormTemC.sourceType"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div style="display: flex;justify-content: center;margin-top: 20px;">
                                        <el-button size="mini"
                                                   @click="queryBtnTemC">查询</el-button>
                                        <el-button size="mini"
                                                   @click="resetBtnTemC">重置</el-button>
                                    </div>
                                </div>
                                <i class="iconfont icon-sousuo"
                                   title="搜索"
                                   style="margin-left:22px;color:#98A5C0;"
                                   slot="reference"></i>
                            </el-popover>
                        </div>
                    </div>

                    <!-- 列表 -->
                    <el-table ref="multipleTableTemC"
                              :data="tableDataTemC"
                              height="450px"
                              stripe
                              @row-click="authorizeForTemC">
                        <el-table-column width="55"
                                         type="selection"
                                         ></el-table-column>
                        <el-table-column prop="dictCode"
                                         label="编码"
                                          show-overflow-tooltip > </el-table-column>
                        <el-table-column prop="dictName"
                                         label="名称"
                                          show-overflow-tooltip > </el-table-column>
                        <el-table-column prop="descn"
                                         label="描述"
                                          show-overflow-tooltip > </el-table-column>
                        <el-table-column prop="sourceType"
                                         label="属性"
                                         >
                            <div slot-scope="scope">
                                <div v-if="scope.row.sourceType == 'V'"
                                     style="color:red">
                                    系统内置
                                </div>
                                <div v-if="scope.row.sourceType == 'U'">用户定义</div>
                            </div>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->

                    <pagination @size-change="handleSizeChangeTemC"
                                @current-change="handleCurrentChangeTemC"
                                @refresh="searchFuncTemC"
                                :current-page="searchFormTemC.pageNo"
                                :total="totalTemC"
                                :page-size="searchFormTemC.pageSize"></pagination>
                </el-col>
            </el-row>
        </el-dialog>
        <!-- 查看配置     ##################################################################################################### -->
        <el-dialog v-dialogDrag
                   title="查看配置"
                   :visible.sync="seeTemplate"
                   width="700px"
                   top="5%">
            <div>
                <FieldInformationCom ref="FieldInformationCom"
                                     :required-parameter="requiredParameter" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import FieldInformationCom from './fieldInformationCom'
import { publicManage_dat } from '@/api/index'
export default {
    components: {
        FieldInformationCom,
    },
    data() {
        return {
            //  表单过滤  =================================================================================================
            checkList: ['模板编号', '模板名称', '所属模块', '描述'],
            textData: [
                { prop: 'tableNameEn', label: '模板编号' },
                { prop: 'tableNameCn', label: '模板名称' },
                { prop: 'moduleCode', label: '所属模块' },
                { prop: 'descn', label: '描述' },
            ],
             moduleCodeList: [
      ],
            //  查看配置  =================================================================================================
            seeTemplate: false,
            requiredParameter: '',
            //  配置模板  =================================================================================================
            addOrEditTemA: false,
            searchFormTemA: {
                tableNameCn: '',
                moduleCode: '',
                isModule: '1',
                page: 1,
                size: 15,
            },
            totalTemA: 0,
            tableDataTemA: [],
            //  编辑字段  =================================================================================================
            addOrEditTemB: false,
            saveFormTemB: {
                columnEn: '',
                columnCn: '',
                dataType: '',
                length: '',
                relatedDimensionCode: '',
                columnType: '',
                status: '',
            },
            saveFormRules: {
                columnEn: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                columnCn: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5]{1,20}$/,
                        message: '只能输入1-20位的汉字',
                        trigger: 'blur',
                    },
                ],
                dataType: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                length: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                // relatedDimensionCode: [
                //   {
                //     required: true,
                //     message: "该输入项为必输项",
                //     trigger: "blur"
                //   }
                // ],
                columnType: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                status: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
            },
            searchFormTemB: {
                columnEn: '',
                columnCn: '',
                columnType: '',
                tableId: '',
                page: 1,
                size: 15,
            },
            totalTemB: 0,
            tableDataTemB: [],
            //  关联维度  =================================================================================================
            addOrEditTemC: false,
            searchFormTemC: {
                dictCode: '',
                dictName: '',
                sourceType: '',
                pageNo: 1,
                pageSize: 15,
            },
            totalTemC: 0,
            tableDataTemC: [],
        }
    },
    created() {},
    computed: {
        columnState() {
            let arr = [],
                arr1 = this.textData,
                arr2 = this.checkList
            for (let i = 0; i < arr1.length; i++) {
                let flg = false
                for (let j = 0; j < arr2.length; j++) {
                    if (arr1[i].label === arr2[j]) {
                        flg = true
                    }
                }
                arr.push(flg)
            }
            return arr
        },
    },
    mounted() {
        this.getDict()
        this.$nextTick(()=>{
            this.searchFuncTemA()
        })
    },
    watch: {},
    methods: {
        getDict(){
            this.$getDict('cpm_moduleCode').then(res=>{
                if(res.code==200){
                    this.moduleCodeList = res.datas
                }
            })
        },
        //配置模板/查看配置
        operatingTemA(e) {
            let selection = this.$refs.multipleTableTemA.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行配置')
            }
            if (e === 1) {
                this.addOrEditTemA = true
                this.searchFormTemB.tableId = selection[0].tableId
                this.searchFuncTemB()
            } else {
                this.seeTemplate = true
                this.requiredParameter = selection[0].tableId
                this.$nextTick(() => {
                     this.$refs.FieldInformationCom.saveForm.columnEn = ''
                        this.$refs.FieldInformationCom.saveForm.columnCn = ''
                        this.$refs.FieldInformationCom.saveForm.columnType = ''
                    this.$refs.FieldInformationCom.searchFunc()
                })
            }
        },
        //查询
        queryBtnTemA() {
            this.searchFormTemA.page=1;
            this.searchFuncTemA()
        },
        //重置
        resetBtnTemA() {
            this.searchFormTemA.moduleCode = "";
            this.searchFormTemA.tableNameCn = "";
        },
        //点击行选中
        authorizeForTemA(row) {
            if (this.$refs.multipleTableTemA) {
                this.$refs.multipleTableTemA.clearSelection()
            }
            this.$refs.multipleTableTemA.toggleRowSelection(row, true)
        },
        //分页
        handleSizeChangeTemA(val) {
            this.searchFormTemA.size = val
            this.searchFuncTemA()
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChangeTemA(val) {
            this.searchFormTemA.page = val
            this.searchFuncTemA()
            console.log(`当前页: ${val}`)
        },
        //请求搜索
        searchFuncTemA() {
            publicManage_dat
                .fundToolTableQuery(this.searchFormTemA)
                .then((res) => {
                    if (res.code === 200) {
                        this.tableDataTemA = res.datas.rows
                        this.totalTemA = res.datas.total
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //  配置模板  =================================================================================================
        //编辑
        editTemB() {
            let selection = this.$refs.multipleTableTemB.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行编辑')
            }
            this.saveFormTemB = JSON.parse(JSON.stringify(selection[0]))
            this.addOrEditTemB = true
        },
        //启用
        enableTemB() {
            let selection = this.$refs.multipleTableTemB.selection
            if (selection.length == 0) {
                return this.$message.warning('请选择数据进行启用')
            }
            const ids = []
            selection.forEach((element) => {
                ids.push(element.columnCode)
            })
            publicManage_dat
                .fundToolTableColumnPublish({ ids: ids })
                .then((res) => {
                    if (res.code === 200) {
                        this.$message.success('成功启用')
                        this.searchFuncTemB()
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //停用
        blockUpTemB() {
            let selection = this.$refs.multipleTableTemB.selection
            if (selection.length == 0) {
                return this.$message.warning('请选择数据进行停用')
            }
            const ids = []
            selection.forEach((element) => {
                ids.push(element.columnCode)
            })
            publicManage_dat
                .fundToolTableColumnStop({ ids: ids })
                .then((res) => {
                    if (res.code === 200) {
                        this.$message.success('成功停用')
                        this.searchFuncTemB()
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //查询
        queryBtnTemB() {
            this.searchFormTemB.page = 1
            this.searchFuncTemB()
        },
        //重置
        resetBtnTemB() {
            this.searchFormTemB.columnEn = ''
            this.searchFormTemB.columnCn = ''
            this.searchFormTemB.columnType = ''
        },
        //分页
        handleSizeChangeTemB(val) {
            this.searchFormTemB.size = val
            this.searchFuncTemB()
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChangeTemB(val) {
            this.searchFormTemB.page = val
            this.searchFuncTemB()
            console.log(`当前页: ${val}`)
        },
        //请求搜索
        searchFuncTemB() {
            publicManage_dat
                .fundToolTableColumnQuery(this.searchFormTemB)
                .then((res) => {
                    if (res.code === 200) {
                        this.tableDataTemB = res.datas.rows
                        this.totalTemB = res.datas.total
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //  编辑字段  =================================================================================================
        //确定
        confirmTneTemB() {
            this.$refs.addTreeForm.validate((valid) => {
                if (valid) {
                    let save = {
                        columnEn: this.saveFormTemB.columnEn,
                        tableId: this.saveFormTemB.tableId,
                    }
                    publicManage_dat.fTTCCheckColumnEn(save).then((res) => {
                        if (res.code === 200) {
                            publicManage_dat
                                .fundToolTableColumnSave(this.saveFormTemB)
                                .then((res) => {
                                    if (res.code === 200) {
                                        this.searchFuncTemB()
                                        this.addOrEditTemB = false
                                    }
                                })
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
        },
        //取消
        cancelTneTemB() {
            this.addOrEditTemB = false
        },
        //关联维度
        getDimTemB() {
            this.searchFuncTemC()
            this.addOrEditTemC = true
        },
        //点击行选中
        authorizeForTemB(row) {
            if (this.$refs.multipleTableTemB) {
                this.$refs.multipleTableTemB.clearSelection()
            }
            this.$refs.multipleTableTemB.toggleRowSelection(row, true)
        },
        //  关联维度  =================================================================================================
        //确认
        affirmTemC() {
            let selection = this.$refs.multipleTableTemC.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据确认')
            }
            this.saveFormTemB.relatedDimensionCode = selection[0].dictCode
            this.addOrEditTemC = false
        },
        //关闭
        closeTemC() {
            this.addOrEditTemC = false
        },
        //查询
        queryBtnTemC() {
            this.searchFormTemC.pageNo=1;
            this.searchFuncTemC()
        },
        //重置
        resetBtnTemC() {
        },
        //点击行选中
        authorizeForTemC(row) {
            if (this.$refs.multipleTableTemC) {
                this.$refs.multipleTableTemC.clearSelection()
            }
            this.$refs.multipleTableTemC.toggleRowSelection(row, true)
        },
        //分页
        handleSizeChangeTemC(val) {
            this.searchFormTemC.pageSize = val
            this.searchFuncTemC()
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChangeTemC(val) {
            this.searchFormTemC.pageNo = val
            this.searchFuncTemC()
            console.log(`当前页: ${val}`)
        },
        //请求搜索
        searchFuncTemC() {
            publicManage_dat
                .dimDictTypeQuery(this.searchFormTemC)
                .then((res) => {
                    if (res.code === 200) {
                        this.tableDataTemC = res.data
                        this.totalTemC = res.count
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        //处理字段类型
        columnTypeFormatter(val) {
            let str = ''
            switch (val.columnType) {
                case '0':
                    str = '内置字段'
                    break
                case '1':
                    str = '扩展字段'
                    break
                default:
                    break
            }
            return str
        },
        //处理字段状态
        statusFormatter(val) {
            let str = ''
            switch (val.columnType) {
                case '0':
                    str = '停用'
                    break
                case '1':
                    str = '启用'
                    break
                default:
                    break
            }
            return str
        },
    },
}
</script>